<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style></style>
  </head>
  <body>
    <!--
  This example requires updating your template:

  ```
  <html class="h-full bg-gray-100">
  <body class="h-full">
  ```
-->
    <div class="min-h-full">
      <nav class="bg-gray-800">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div class="flex h-32 items-center justify-center text-center">
            <div class="text-white text-3xl">《Docker 简单使用 示例项目》</div>
          </div>
        </div>
      </nav>

      <header class="bg-white shadow">
        <div
          class="flex justify-between mx-auto max-w-7xl py-6 px-4 sm:px-6 lg:px-8"
        >
          <div class="flex items-center">
            <h1 class="text-3xl font-bold tracking-tight text-gray-900">
              新增人员
            </h1>
            <h5 class="ml-8 text-gray-500">用于演示 addUser</h5>
          </div>
          <div>
            <button
              type="submit"
              onclick="addUserApiHandle()"
              class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
            >
            新增
            </button>
          </div>
      </header>
      <main>
        <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
          <!-- Replace with your content -->
          <div class="px-4 py-6 sm:px-0">
            <div class="mt-5 md:col-span-2 md:mt-0">
              <div id="id_add_user">
                <div class="overflow-hidden shadow sm:rounded-md">
                  <div class="bg-white px-4 py-5 sm:p-6">
                    <div class="grid grid-cols-9 gap-2">
                      <div class="col-span-3 sm:col-span-3">
                        <label
                          for="name"
                          class="block text-sm font-medium text-gray-700"
                          >姓名</label
                        >
                        <input
                          type="text"
                          name="name"
                          id="name"
                          autocomplete="email"
                          class="h-10 mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                        />
                      </div>
                      <div class="col-span-3 sm:col-span-3">
                        <label
                          for="gender"
                          class="block text-sm font-medium text-gray-700"
                          >性别</label
                        >
                        <select
                          id="gender"
                          name="gender"
                          autocomplete="country-name"
                          class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                        >
                          <option value="男">男</option>
                          <option value="女">女</option>
                        </select>
                      </div>
                      <div class="col-span-3 sm:col-span-3">
                        <label
                          for="hobby"
                          class="block text-sm font-medium text-gray-700"
                          >爱好</label
                        >
                        <input
                          type="text"
                          name="hobby"
                          id="hobby"
                          autocomplete="email"
                          class="h-10 mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- /End replace -->
        </div>
      </main>

      <!--  -->
      <header class="bg-white shadow">
        <div
          class="flex justify-between mx-auto max-w-7xl py-6 px-4 sm:px-6 lg:px-8"
        >
          <div class="flex items-center">
            <h1 class="text-3xl font-bold tracking-tight text-gray-900">
              查看人员
            </h1>
            <h5 class="ml-8 text-gray-500">用于演示 getUser</h5>
          </div>
          <div>
            <button
              type="submit"
              onclick="getUserApiHandle()"
              class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
            >
              查询
            </button>
          </div>
        </div>
      </header>
      <main>
        <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
          <!-- Replace with your content -->
          <div class="px-4 py-6 sm:px-0">
            <div class="pointer-events-auto w-full">
              <div class="flex h-full flex-col bg-white shadow-xl">
                <div class="flex-1 py-6 px-4 sm:px-6">
                  <div class="mt-8">
                    <div class="flow-root w-full">
                      <ul
                        role="list"
                        class="-my-6 divide-y divide-gray-200"
                        id="id_user_list"
                      >
                        <!-- More products... -->
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- /End replace -->
        </div>
      </main>
    </div>
  </body>

  <!-- js 脚本 -->
  <script>
    const BASE_HOST = "localhost";
    // 新增用户api
    const ADD_USER_API = "add_user/";
    // 删除用户api
    const DEL_USER_API = "del_user/";
    // 查询用户请求
    const GET_USER_API = "get_user/";

    const ADD_USER_PORT='';
    const GET_USER_PORT='';

    // 额外删除
    const delUserApiHandle = async (del_id) => {
      const name = document.getElementById("name").value;
      const gender = document.getElementById("gender").value;
      const hobby = document.getElementById("hobby").value;
      const formData = { delId: del_id };
      try {
        const res = await fetch(`http://${BASE_HOST}${ADD_USER_PORT}/${DEL_USER_API}`, {
          method: "post",
          body: JSON.stringify(formData),
          headers: {
            "Content-Type": "application/json",
          },
        }).then((resP) => resP.text());
        try {
          alert("删除成功！");
          getUserApiHandle();
        } catch (error) {
          alert("操作异常");
        }
      } catch (netErr) {
        alert("操作异常");
      }
    };

    // addUser 相关 start
    // 获取用户列表api
    const addUserApiHandle = async () => {
      const name = document.getElementById("name").value;
      const gender = document.getElementById("gender").value;
      const hobby = document.getElementById("hobby").value;
      if(!name || !gender || !hobby) return;
      const formData = { name, gender, hobby };
      try {
        const res = await fetch(`http://${BASE_HOST}:${ADD_USER_PORT}/${ADD_USER_API}`, {
          method: "post",
          body: JSON.stringify(formData),
          headers: {
            "Content-Type": "application/json",
          },
        }).then((resP) => resP.text());
        try {
          alert("新增成功！");
          getUserApiHandle();
        } catch (error) {
          alert("操作异常");
        }
      } catch (netErr) {
        alert("操作异常");
      }
    };
    // addUser 相关 end

    // getUser 相关 start
    // 更新用户列表
    const updateUserList = (list) => {
      const userListEle = document.getElementById("id_user_list");
      const ulList = list.map((item) => {
        return `<li class="flex py-6">
                          <div
                            class="h-24 w-24 flex-shrink-0 rounded-md border border-gray-200"
                          >
                            <img
                              src="https://picsum.photos/id/${item.id}/100/100"
                              class="h-full w-full object-cover object-center"
                            />
                          </div>
                          <div class="ml-4 flex flex-1 flex-col">
                            <div
                              class="flex mt-3 justify-between align-center text-base font-medium text-gray-900"
                            >
                              <h3>
                                <a href="#">${item.name}</a>
                                <div>${item.gender}</div>
                              </h3>
                              <div class="text-red-500 cursor-pointer" data-del_id="${item.id}">删除</div>
                            </div>
                            <div
                              class="flex flex-1 items-end justify-between text-sm"
                            >
                              <p class="text-gray-500">${item.hobby}</p>
                            </div>
                          </div>
                        </li>`;
      });
      userListEle.innerHTML = ulList.join("");
    };

    // 获取用户列表api
    const getUserApiHandle = async () => {
      try {
        const res = await fetch(
          `http://${BASE_HOST}${GET_USER_PORT}/${GET_USER_API}`
        ).then((resP) => resP.text());
        updateUserList(JSON.parse(res).data);
      } catch (netErr) {
        alert("操作异常");
      }
    };

    // getUser 相关 end

    // 删除事件监听
    const delEventListenOn = () => {
      document.getElementById("id_user_list").addEventListener("click", (e) => {
        delUserApiHandle(e?.target?.dataset?.del_id);
      });
    };
    // 删除事件监听
    delEventListenOn();
    // 初始查找一次数据
    getUserApiHandle();
  </script>
</html>
